<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }

    ul {
        display: flex;
        justify-content: center;
    }

    li {
        width: 70px;
        height: 70px;
        border: 1px solid #a0913d;
        background: #000;
        color: #a0913d;
        border-radius: 7px;
        text-align: center;
        line-height: 70px;
        box-shadow: 5px 5px 5px #a0913d;
        margin: 10px 5px;
        transition: .3s;
        cursor: pointer;
    }

    .act {
        background-color: yellow;
        border-color: yellow;
        color: #333;
    }

    .act1 {
        background-color: greenyellow;
        border-color: greenyellow;
        color: #333;
    }
</style>

<body>
    <div id='app'>
        <ul>
            <li v-for='(item, index) in ques' :class="index < count ? 'act1':''">
                {{item}}
            </li>
        </ul>
        <ul v-for="(row, i) in keys">
            <li v-for='(col, j) in row' :class="col == key? 'act':''" @click="clickLetter(col)">{{col}}</li>
        </ul>
        <h1>{{list}}</h1>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    ques: ['A', 'D', 'R', 'Y'],
                    keys: [
                        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
                        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
                        ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
                    ],
                    key: '',
                    count: 0,
                    list: ''
                }
            },
            mounted() {
                document.addEventListener('keydown', this.press)
            },
            methods: {
                press(event) {
                    this.key = event.key.toUpperCase()
                    let i = this.count,
                        j = this.ques.length
                    if (this.key == this.ques[i]) {
                        this.count++
                        this.checkCompletion()
                    }
                },
                clickLetter(letter) {
                    this.key = letter;
                    let i = this.count;
                    if (this.key == this.ques[i]) {
                        this.count++;
                        this.checkCompletion()
                    }
                },
                checkCompletion() {
                    if (this.count === this.ques.length) {
                        this.generateNewQues()
                        this.count = 0
                    }
                },
                generateNewQues() {
                    const allLetters = [].concat(...this.keys)
                    const newQues = []
                    for (let i = 0; i < 4; i++) {
                        const randomIndex = Math.floor(Math.random() * allLetters.length)
                        newQues.push(allLetters[randomIndex])
                    }
                    this.ques = newQues
                }
            }
        }).mount('#app')
    </script>
</body>

</html>    